<!DOCTYPE html>
<html>
<head lang="zh-cn">
    <meta charset="UTF-8">
    <title>带缩略图的图片切换效果</title>
</head>
<style>
    * { margin:0; padding:0;}
    body { font-family: "微软雅黑", "Microsoft Yahei", Arial, "黑体", sans-serif; font-size: 14px;}
    li { list-style:none;}
    a { text-decoration: none;}
    #slide { width: 300px; height: 200px; margin: 0 auto;position: relative; top:50px; border: 1px solid #000;}
    #slide p,#slide ul { position: absolute; left: 0; width: 300px; background-color: rgba(0,0,0,0.7); color: #fff; text-align: center; line-height: 30px; }
    #slide p { top: 0;}
    #slide ul { bottom: 0;}
    #slide img { border: none; vertical-align: top;}
    #slide li { display: inline-block; width: 8px; height: 9px; background-color: #CCC; border-radius: 50%; cursor: pointer; margin: 0 2px;}
    #slide .min-img { position: absolute; top: -45px; left: 100px; display: none;}
    #slide .min-img img { width: 100px; height: 50px; border: 1px solid #333;}
    #slide .bg { background-color: #dc143c;}
    #slide .hover { display: block;}
    #back,#next { position: absolute; width: 30px; height: 30px; line-height: 30px; text-align: center; top: 86px; border: 1px solid #ccc; font-weight: 500; font-size: 20px; color: #fff;}
    #back { left: 0;}
    #next { right: 0;}
</style>
<script>
    window.onload = function(){

        var oSli = document.getElementById('slide');
        var oBack = document.getElementById('back');
        var oNext = document.getElementById('next');

        var oP = oSli.getElementsByTagName('p')[0];
        var oImg = oSli.getElementsByTagName('img')[0];
        var oUl = oSli.getElementsByTagName('ul')[0];
        var aLi = oUl.getElementsByTagName('li');
        var aDiv = oUl.getElementsByTagName('div');

        var arrUrl = ['pic/101.jpg','pic/102.jpg','pic/103.jpg','pic/104.jpg']
        var arrTxt = ['图片一','图片二','图片三','图片四'];
        var num = 0;

        //初始化数据
        for(var i=0; i<arrUrl.length; i++){
            oUl.innerHTML += '<li>' + '<div class="min-img">' + '<img src=" '+ arrUrl[i] +' ">' + '</div>' + '</li>';
        }
        aLi[num].className = 'bg';
        function fn(){
            oP.innerHTML = arrTxt[num];
            oImg.src = arrUrl[num];
        }
        fn();
        aDiv[num].className = 'min-img';
        //添加事件
        for(var i=0; i<aLi.length; i++){
            aLi[i].index = i;
            aLi[i].onmouseover = function(){
                aDiv[this.index].className = 'min-img hover';
            };
            aLi[i].onmouseout = function(){
                aDiv[this.index].className = 'min-img';
            };
            aLi[i].onclick = function(){
                num = this.index;
                fn1();
            };
            oBack.onclick = function(){
                num--;
                if(num<0){
                    num = arrTxt.length-1;
                    fn1();
                }else{
                    fn1();
                }
            };
            oNext.onclick = function(){
                num++;
                if(num<arrTxt.length){
                    fn1();
                }else{
                    num = 0;
                    fn1();
                }
            };

            function fn1(){
                for(var i=0; i<aLi.length; i++){
                    aLi[i].className = '';
                    fn();
                }
                aLi[num].className = 'bg';
                fn();
            }
        }
    }
</script>
<body>
    <div id="slide">
        <p>内容正在加载中……</p>
        <img src="" alt="" />
        <ul></ul>
        <a href="javascript:" id="back">←</a>
        <a href="javascript:" id="next">→</a>
    </div>
</body>
</html>